<template>
    <div id="publish">
        <div class="navbar">
            <div class="icon" @click="goBack">
                <i class="iconfont">&#xe72d;</i>
            </div>
            发表评论
            <div class="button" @click="send">发送</div>
        </div>
        <div class="container">
            <textarea :placeholder="username?'回复@'+username:'围绕游戏画面、玩法、操作、氪金等方面发表您对该游戏的真实看法和体验。'" v-model="content"  ref="textarea"></textarea>
            <!-- <div class="upload">
                <span class="upload-btn"></span>
            </div> -->
        </div>
    </div>
</template>

<script>
    import {publishComment} from 'api/game_box'
    import {mapState,mapMutations} from 'vuex' 
    import { Toast } from 'vant'
    export default {
        data(){
            return{
                username:'',
                gameId:'',
                content:'',
                pid:'',
                by_userid:'',
                goStep:-1,
            }
        },
        created(){
            this.init();
        },
         computed:{
           ...mapState(['isReload'])
        },
        methods:{
            islogin(){
                
            },
            init(){
                this.username= this.$route.query.username;
                this.gameId=this.$route.query.gameId;
                this.pid=this.$route.query.pid;
                this.by_userid=this.$route.query.by_userid;
            },
            send(){
                if(this.content.length==0){
                    Toast("评论不能为空");
                    return
                }
                if(this.by_userid){
                    publishComment(this.gameId,this.content,this.pid,this.by_userid).then(res=>{
                        if (res.data.error == 0) {
                            this.SET_RELOAD(true);
                            Toast(res.data.msg);
                            setTimeout(()=>{
                                this.$router.back();
                            },1000)
                        }
                    })
                }else{
                    publishComment(this.gameId,this.content,"","").then(res=>{
                        if (res.data.error == 0) {
                            this.SET_RELOAD(true);
                            Toast(res.data.msg);
                            setTimeout(()=>{
                                 this.$router.go(-1);
                            },1000)
                        }
                    })
                }
            },
            goBack(){
                this.SET_RELOAD=false;
                this.$router.go(-1);
            },
            ...mapMutations(['SET_RELOAD'])
        },
        mounted(){
            document.getElementsByClassName("gameDetail-con")[0].style="height:0";
            this.$refs.textarea.focus();
        },
        beforeDestroy: function() {
            try{
                document.getElementsByClassName("gameDetail-con")[0].style="height:auto";
            }catch(err){

            }
        },
        destroyed(){
            Toast.clear();
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins.scss';
#publish{
    width: 7.5rem;
    margin:0 auto;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}
.navbar{
    position:relative;
    height:0.8rem;
    line-height:0.8rem;
    background:$color-focus;
    text-align:center;
    font-size:$font-size-l;
    color:#fff;
    .icon{
        position:absolute;
        top:0;
        left:0;
        .iconfont{
            padding:0 0.2rem;
            font-size:0.4rem;
            color:#fff;
        }
    }
    .button{
        position:absolute;
        right:0.24rem;
        top:0.15rem;
        width:1.16rem;
        height:0.52rem;
        border:1px solid #74e7e1;
        border-radius:5px;
        line-height:0.5rem;
        font-size:$font-size-m;
        color:#fff;
    }
}
.container{
    height:100%;
    textarea{
        position: fixed;
        top: 0.8rem;
        bottom: 0;
        width:7.5rem;
        padding:0.24rem 0.36rem;
        border:none;
        resize: none;
        font-size:$font-size-m;
    }
    .upload{
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        padding:0.36rem;
        background: #f5f5f5;
        .upload-btn{
            display:inline-block;
            width:0.45rem;
            height:0.4rem;
            background-size:100% 100%;
            @include bg-image('../../assets/image/icon_picture');
        }
    }
}
</style>